<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="100px">
    <el-row>
      <el-col :span="10"> <el-form-item label="用户昵称" prop="nickName">
        <el-input v-model="user.nickName" />
      </el-form-item></el-col>
      <el-col :span="10">
        <el-form-item label="姓名" prop="usersName">
          <el-input v-model="user.usersName" placeholder="请输入用户姓名"/>
        </el-form-item>
      </el-col>
    </el-row>
<el-row>
  <el-col :span="10">
    <el-form-item label="证件类型" prop="idCardTypeId">
      <el-select v-model="user.idCardTypeId" placeholder="请选择证件类型" clearable size="small">
        <el-option
          v-for="item in idCardTypeOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item></el-col>
  <el-col :span="10">
    <el-form-item label="证件号码" prop="idCardNo">
      <el-input v-model="user.idCardNo" placeholder="请输入证件号码"/>
    </el-form-item>
  </el-col>
</el-row>
<el-row>
  <el-col :span="10">
    <el-form-item label="手机号码" prop="phonenumber">
      <el-input v-model="user.phonenumber" maxlength="11" />
    </el-form-item>
  </el-col>
  <el-col :span="10">  <el-form-item label="邮箱" prop="email">
    <el-input v-model="user.email" maxlength="50" />
  </el-form-item></el-col>
</el-row>
<el-row>
  <el-col :span="10">
    <el-form-item label="证件有限期限" prop="timeLimit">
      <el-date-picker
        v-model="dateRange2"
        size="small"
        style="width: 200px"
        value-format="timestamp"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :onchange="handChange()"
      ></el-date-picker>
    </el-form-item>
  </el-col>
 <el-col :span="10">
  <el-form-item label="注册所在地" prop="registerAddress">
    <el-input v-model="user.registerAddress" placeholder="请输入注册所在地"/>
  </el-form-item>
</el-col>
  <el-col :span="10">
    <el-row>
      <el-form-item label="通信地址" prop="mailingAddress">
        <el-input v-model="user.mailingAddress" placeholder="请输入通信地址"/>
      </el-form-item>
    </el-row>
  </el-col>
  <el-col :span="10">
    <el-form-item label="组织类型" prop="organizationType">
      <el-input v-model="user.organizationType" placeholder="请输入组织类型"/>
    </el-form-item>
  </el-col>
</el-row>

<el-row>

  <el-col :span="10">
    <el-form-item label="联系人名称" prop="contactName">
      <el-input v-model="user.contactName" placeholder="请输入联系人名称"/>
    </el-form-item>
  </el-col>
  <el-col :span="10">
    <el-form-item label="性别">
      <el-radio-group v-model="user.sex">
        <el-radio label="0">男</el-radio>
        <el-radio label="1">女</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-col>
</el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="公章" prop="seal">
          <el-upload
            class="upload-demo"
            action
            :http-request="handleUpdateForm"
            :before-upload="beforeUploadForm"
            :auto-upload="true"
            :show-file-list="false"
          >
            <div v-if="show" style="border: 1px solid #d9d9d9;width: 100px;height: 100px;line-height: 100px;text-align: center">
              <i class="el-icon-plus" style="font-size: 30px;color: #d9d9d9"></i>
            </div>
            <div v-else style="width: 160px;height: 50px;line-height: 50px" >
              <img :src="url+user.seal" width="100" height="100px">
            </div>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateUserProfile } from "@/api/system/user";
import {listIdCardType,get_card_type} from "@/api/base/idCardType";
import {uploadTmage} from "@/api/base/template";
export default {
  props: {
    user: {

      type: Object,
      nickName:'',//用户昵称
      phonenumber:'',//手机号码
      email:'',//邮箱
      sex:'',//性别
      usersName:'',//账户姓名
      idCardTypeId:'',//证件类型
      idCardNo:'',//证件号码
      registerAddress:'',//注册所在地
      organizationType:'',//组织类型
      mailingAddress:'',//通信地址
      contactName:'',//联系人姓名
      seal:'',//公章
    }
  },
  data() {
    return {
      //投保人签字展示显示隐藏
      show: true,
      url:process.env.VUE_APP_BASE_API,//地址
      dateRange2:[],
      // 表单校验
      rules: {
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        dateRange2: [],
      },
      //证件类型
      idCardTypeOptions: [],

    };
  },
  created() {

    this.getListIdCardType();
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserProfile(this.user).then(response => {
            this.msgSuccess("修改成功");
          });
        }
      });
    },
    // 上传签章格式显示
    beforeUploadForm(file){
      // console.log('file12',file)
      const isPng=file.type==='image/png';
      const  isLt2M=file.size/1024/1024<2;
      if (!isPng){
        this.$message.error('上传签章只能是png格式!');

      }
      if (!isLt2M){
        this.$message.error('上传签章大小不能超过2MB!');
      }
      return isPng && isLt2M;
    },
    //上传签章
    handleUpdateForm(param) {
      // console.log('param', param)
      // console.log('isSupportUpdate',this.upload)
      let that = this;
      let formData = new FormData();
      formData.append('file', param.file);
      // console.log('param', formData);
      uploadTmage(formData).then(response => {
        this.user.seal = response.fileName;
        if (this.user.seal!=''){
          this.show=false;
        }else{
          this.show=true;
        }
        // console.log('res', response)

      })
    },
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/index" });
    },
    //证件类型
    getListIdCardType(){
      get_card_type().then(res => {
        this.idCardTypeOptions = res.data
        // console.log(res)
      })
    },
    //确认选定的值
    handChange() {
      // console.log('dateRange2',this.dateRange2)
      this.user.timeLimitStart = this.dateRange2[0]
      this.user.timeLimitEnd = this.dateRange2[1]
    }
  }
};
</script>
<style scoped>
.el-input{
  width: 220px;
}
</style>
